<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<title>留言板</title>
		<style>
			.container {
				width: 350px;
				height: 300px;
				margin: 0 auto;
				/* border: 1px black solid; */
				text-align: center;
			}

			.grey {
				color: grey;
			}

			.container .row {
				width: 350px;
				height: 40px;

				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.container .row input {
				width: 260px;
				height: 30px;
			}

			#submit {
				width: 350px;
				height: 40px;
				background-color: orange;
				color: white;
				border: none;
				margin: 10px;
				border-radius: 5px;
				font-size: 20px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<h1>留言板</h1>
			<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
			<div class="row">
				<span>谁:</span>
				<input
					type="text"
					name=""
					id="from"
				/>
			</div>
			<div class="row">
				<span>对谁:</span>
				<input
					type="text"
					name=""
					id="to"
				/>
			</div>
			<div class="row">
				<span>说什么:</span>
				<input
					type="text"
					name=""
					id="say"
				/>
			</div>
			<input
				type="button"
				value="提交"
				id="submit"
				onclick="submit()"
			/>
			<!-- <div>A 对 B 说: hello</div> -->
		</div>

		<script src="js/jquery.min.js"></script>
		<script>
			// 进来就先发送获得列表请求
			$.ajax({
				url: '/messageWall/getMessageWallList',
        method: 'get',
				success(result) {
					if (result) {
						// 成功q
						// 遍历
						for (let key in result) {
							const { from, to, message } = result[key]
							let msg = '<div>' + from + '对' + to + '说:' + message + '</div>'
							$('.container').append(msg)
						}
					} else {
						// 失败
						console.log('error')
					}
				},
			})

			function submit() {
				let from = $('#from').val()
				let to = $('#to').val()
				let say = $('#say').val()

				if (from == '' || to == '' || say == '') {
					return
				}
				//不为空
				let message = '<div>' + from + '对' + to + '说:' + say + '</div>'
				$('.container').append(message)
				//清空输入信息
				$('#from').val('')
				$('#to').val('')
				$('#say').val('')

        // 添加到后台
        $.ajax({
          url: "/messageWall/submit",
          method: 'post',
          contentType: 'application/json',
          data: JSON.stringify({
            from,
            to,
            message
          }),
          success(response) {
            console.log(response);
          }
        });
			}
		</script>
	</body>
</html>
